<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-16 09:08:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-23 10:14:55
-->
<template>
  <span class="title">
    营销标签
  </span>
  <button class="label-button">
    陪同办签
    <i
      class="el-icon-delete"  
      style="color: gray"
    />
  </button>
  <ul>
    <li
      v-for="(item, index) in selectedItem"
      :key="index"
    >
      {{ item }}
    </li>
  </ul>
  <button class="button">
    <el-button
      type="text"
      @click="dialogVisible = true"
      class="plus-button"
    >
      <i class="el-icon-plus" />
    </el-button>
  </button>
  <el-dialog
    title="选择营销标签"
    v-model="dialogVisible"
    width="60%"
  >
    <LabelDialog
      :product-list="productlist"
      @confirmLabel="getConfirmLabel($event)"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >
          确认选择
        </el-button>
        <el-button @click="dialogVisible = false">
          取 消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { ElMessageBox } from 'element-plus'
import LabelDialog from './LabelDialog.vue'

export default defineComponent({
  components: {
    LabelDialog
  },
  setup() {
    const dialogVisible = ref(false)
    const methods = reactive({
      selectedItem: [],
      productlist: [
        {
          id: 0,
          title: '低价保障1',
          number: 258749
        },
        {
          id: 1,
          title: '蜜月游2',
          number: 12345
        },
        {
          id: 2,
          title: '亲子游3',
          number: 12345
        },
        {        
          id: 3,
          title: '星光酒店',
          number: 12345
        }
      ],
      open() {
        ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '选择营销标签', {
          confirmButtonText: '确认选择',
          cancelButtonText: '取消',
          type: 'warning'
        })
      },
      getConfirmLabel(value: any) {
        this.selectedItem = value
        console.log('selectItem', this.selectedItem)
      }
    })

    return {
      ...toRefs(methods),
      dialogVisible
    }
  }

})
</script>

<style lang="scss" scoped>
.title {
  margin-right: 30px;
}
.label-button {
  border: 1px solid gray;
  margin-right: 10px;

}
.button {
  margin-top: 5px;
}
.plus-button {
  color: #555;
  min-height: 25px;
  height: 25px;
  width: 15px;
}
.el-icon-plus {
  position: relative;
  &::after {
    position: absolute;
    top: -16px;
    left: -7px;
  }
}
:deep .el-dialog__header {
  background-color: blue;
}
:deep .el-dialog__body {
  padding-top: 15px;
}
</style>
